<template>
  <div id="message">
    <div class="motor">
      <p class="name">广东路机房</p>
      <p class="value">10.1.100.1</p>
    </div>
    <div class="bottom">
      <div v-for="(it, i) in items" :key="i" class="chart-container">
        <dv-water-level-pond :config="it.config" />
        <div
          class="rightpicture"
          :style="{ backgroundImage: `url(${it.bg})` }"
        ></div>
        <p class="nameo" :style="{ color: it.namecolor }">{{ it.name }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Message",
  props: {
    // value: {
    //   type: Array,
    //       default:() => [
    //     {
    //       "name": "CPU",
    //       "value": 87
    //     },
    //     {
    //       "name": "LOAD",
    //       "value": 49
    //     },
    //     {
    //       "name": "MEMORY",
    //       "value": 36
    //     }
    //   ]
    // },
    machinedata: {
      type: Array,
      default: () => [],
    },
  },
  // props:['machinedata'],
  data() {
    return {
      config: {
        data: [21],
        shape: "round",
        waveHeight: 15,
        waveNum: 2,
        waveOpacity: 0.6
        // colors: ['#00ffff', '#00ffff']
      },
    };
  },
  computed: {
    items() {
      let data = this.machinedata;
      // console.log(data);
      let conf = JSON.parse(JSON.stringify(this.config));
      return data.map((item) => {
        let bg = require(`../assets/v7_green.png`);
        let namecolor = "#19f0e9";
        if (item.value > 0 && item.value < 35) {
          conf.colors = ["#19f0e9", "#19f0e9"];
          namecolor = "#19f0e9";
          bg = require(`../assets/v7_green.png`);
        } else if (item.value > 35 && item.value < 70) {
          conf.colors = ["#0cceff", "#0cceff"];
          bg = require(`../assets/v7_blue.png`);
          namecolor = "#0cceff";
        } else {
          conf.colors = ["#ff3333", "#ff3333"];
          bg = require(`../assets/v7_red.png`);
          namecolor = "#ff3333";
        }

        return {
          name: item.name,
          namecolor,
          bg,
          config: {
            ...conf,
            data: [item.value],
          },
        };
      });
    },
  },
  mounted() {
    // console.log(this.machinedata)
  },
};
</script>
<style lang="less" scoped>
.motor {
  width: 148px;
  height: 75px;
  margin-left: 322px;
  margin-top: 33px;
}
.name {
  font-size: 28px;
  color: #ffffff;
}
.value {
  font-size: 23px;
  color: #ffffff;
  position: relative;
  top: 8px;
  left: 5px;
}
.value::before {
  content: " ";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 18px;
  height: 18px;
  background-color: #02fb05;
  border-radius: 10px;
}

p {
  margin: 0;
  padding: 0;
}
.chart-container {
  // flex: 1;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // margin-top: 40px;
  // margin-left: 29px;
  position: relative;
  left: 12px;
  top: 55px;
  width: 250px;
}

.rightpicture {
  width: 100px;
  height: 100px;
  // background: url(../assets/v7_green.png);
  position: absolute;
  left: 55px;
  top: 0px;
}
.dv-water-pond-level {
  // max-width: 30%;
  width: 100px;
  height: 100px;
  // border: 10px solid #19c3eb;
  border-radius: 50%;

  ellipse {
    stroke: transparent !important;
  }

  text {
    font-size: 40px;
    color: #ffffff;
  }
}
.bottom {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.nameo {
  position: absolute;
  left: 117px;
  color: #ffffff;
  font-size: 22px;
  top: 37px;
}
</style>
